<template>
  <div style="padding: 20px">
    <!-- 头部 -->
    <div class="headerBoxList">
      <svg
        width="24"
        height="24"
        viewBox="0 0 48 48"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="M18 6H8C6.89543 6 6 6.89543 6 8V18C6 19.1046 6.89543 20 8 20H18C19.1046 20 20 19.1046 20 18V8C20 6.89543 19.1046 6 18 6Z"
          stroke="#333"
          stroke-width="4"
          stroke-linejoin="round"
        />
        <path
          d="M18 28H8C6.89543 28 6 28.8954 6 30V40C6 41.1046 6.89543 42 8 42H18C19.1046 42 20 41.1046 20 40V30C20 28.8954 19.1046 28 18 28Z"
          stroke="#333"
          stroke-width="4"
          stroke-linejoin="round"
        />
        <path
          d="M40 6H30C28.8954 6 28 6.89543 28 8V18C28 19.1046 28.8954 20 30 20H40C41.1046 20 42 19.1046 42 18V8C42 6.89543 41.1046 6 40 6Z"
          stroke="#333"
          stroke-width="4"
          stroke-linejoin="round"
        />
        <path
          d="M40 28H30C28.8954 28 28 28.8954 28 30V40C28 41.1046 28.8954 42 30 42H40C41.1046 42 42 41.1046 42 40V30C42 28.8954 41.1046 28 40 28Z"
          stroke="#333"
          stroke-width="4"
          stroke-linejoin="round"
        />
      </svg>
      <span style="margin-left: 10px">
        应用信息
        <span style="font-size: 15px" v-if="total !== 0">({{ total }} 行)</span>
      </span>
    </div>

    <div class="content">
      <!-- 筛选 + 时间过滤 -->
      <div style="margin-bottom: 10px; display: flex; align-items: center; flex-wrap: wrap;">
        <el-radio v-model="radio" label="0">所有</el-radio>
        <el-radio v-model="radio" label="1" style="margin-right: 20px;">可下载</el-radio>

        <el-date-picker
          v-model="queryForm.timeRange"
          type="datetimerange"
          range-separator="至"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          value-format="timestamp"
          :default-time="['00:00:00', '23:59:59']"
          unlink-panels
          style="width: 380px; margin-right: 10px;"
        />

        <el-button type="primary" size="small" @click="init">查询</el-button>
        <el-button size="small" @click="onReset" style="margin-left: 8px;">重置</el-button>
      </div>

      <!-- 折叠结构 -->
      <el-collapse v-model="activeCollapse" accordion>
        <!-- 时间线视图 -->
        <el-collapse-item title="时间线" name="1">
          <div class="timeline-wrapper" ref="timelineScroll">
            <div v-for="(item, index) in list" :key="index" class="timeline-item">
              <div class="timeline-dot" :style="{ background: getDotColor(index) }">
                <i class="el-icon-time"></i>
              </div>
              <div v-if="index < list.length - 1" class="timeline-line"
                   :style="{ background: getLineColor(index) }"></div>
              <div class="timeline-content-box">
                <div class="timeline-header">
                  <span class="timeline-step">APP {{ index + 1 }}</span>
                  <span class="timeline-date">{{ item.lastUpdateTime }}</span>
                </div>
                <div class="timeline-card">
                  <div class="timeline-title">{{ item.name || '未知应用' }}</div>
                  <div class="timeline-body">
                    <div>包名：{{ item.package_name }}</div>
                    <div>最后更新时间：{{ item.lastUpdateTime }}</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </el-collapse-item>

        <!-- 表格视图 -->
        <el-collapse-item title="列表详情" name="2">
          <el-table :data="list" border class="tableCCCC" height="60vh" style="width: 100%;">
            <el-table-column prop="name" label="名称"></el-table-column>
            <el-table-column prop="package_name" label="包名">
              <template slot-scope="scope">
                <div>包名: {{ scope.row.package_name }}</div>
                <el-button
                  type="text"
                  v-if="scope.row.filePath"
                  @click="dowloadAppPacge(scope.row.filePath)"
                >
                  下载
                </el-button>
              </template>
            </el-table-column>
            <el-table-column prop="firstInstallTime" label="安装时间" width="180" />
            <el-table-column prop="lastUpdateTime" label="最后一次更新时间" width="180" />
            <el-table-column prop="path" label="路径" />
            <el-table-column prop="size" label="大小(byte)" width="180" />
            <el-table-column prop="versionName" label="版本号" width="180" />
          </el-table>
        </el-collapse-item>
      </el-collapse>

      <!-- 分页 -->
      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="offset"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="limit"
          layout="total, prev, pager, next, jumper"
          :total="total"
        />
      </div>
    </div>
  </div>
</template>

<script>
import { getPhoneBaseApplction } from "@/api/phoneInfo/index";

export default {
  name: "ApplicationInfo",
  props: ["sendData"],
  data() {
    return {
      list: [],
      total: 0,
      offset: 1,
      limit: 20,
      radio: "0",
      activeCollapse: "1",
      queryForm: { timeRange: [] }
    };
  },
  watch: {
    radio() {
      this.offset = 1;
      this.init();
    }
  },
  methods: {
    formatDate(val) {
      if (!val) return "无";
      return new Date(val).toLocaleString();
    },
    getDotColor(i) {
      const colors = ["#00bcd4", "#67c23a", "#e6a23c", "#f56c6c", "#8e44ad"];
      return colors[i % colors.length];
    },
    getLineColor(i) {
      const next = (i + 1) % 5;
      return `linear-gradient(to bottom, ${this.getDotColor(i)}, ${this.getDotColor(next)})`;
    },
    dowloadAppPacge(path, fileName) {
      if (!path) return;
      const a = document.createElement("a");
      a.href = this.$IP + path;
      a.download = fileName || "";
      a.target = "_blank";
      a.click();
    },
    onReset() {
      this.queryForm.timeRange = [];
      this.radio = "0";
      this.offset = 1;
      this.init();
    },
    init() {
  const dataJson = {
    proof_num: this.sendData.proof_num,
    offset: this.offset,
    limit: this.limit,
    hasApk: Number(this.radio)
  };

  // ✅ 仅当选择了时间范围时才加时间参数（格式化为字符串）
  if (this.queryForm.timeRange?.length === 2) {
    const formatDate = (timestamp) => {
      const date = new Date(timestamp);
      const pad = (n) => (n < 10 ? '0' + n : n);
      return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())} `
           + `${pad(date.getHours())}:${pad(date.getMinutes())}:${pad(date.getSeconds())}`;
    };

    dataJson.starttime_str = formatDate(this.queryForm.timeRange[0]);
    dataJson.endtime_str = formatDate(this.queryForm.timeRange[1]);
  }

  getPhoneBaseApplction(dataJson).then((res) => {
    if (res.data.length > 0) {
      this.list = res.data;
      this.total = res.data[0].cnt;
    } else {
      this.list = [];
      this.total = 0;
    }
  });
},

    handleSizeChange(val) {
      this.limit = val;
      this.init();
    },
    handleCurrentChange(val) {
      this.offset = val;
      this.init();
    }
  },
  created() {
    this.init();
  }
};
</script>

<style scoped>
.headerBoxList {
  width: 100%;
  height: 50px;
  border-bottom: 1px solid #d2d2d2;
  display: flex;
  align-items: center;
  font-size: 18px;
  font-weight: bold;
}
.content {
  margin-top: 15px;
}
.tableCCCC {
  height: 60vh;
}

/* 时间轴样式 */
.timeline-wrapper {
  position: relative;
  padding: 20px 40px;
  background: linear-gradient(180deg, #f8f9fb 0%, #eef1f5 100%);
  border-radius: 16px;
  box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.05);
  overflow-y: auto;
  height: 60vh;
  margin-bottom: 15px;
}
.timeline-item {
  position: relative;
  padding-left: 30px;
  margin-bottom: 20px;
  display: flex;
  align-items: flex-start;
}
.timeline-dot {
  position: absolute;
  left: 0;
  top: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  box-shadow: 0 0 12px rgba(64, 158, 255, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 12px;
}
.timeline-line {
  position: absolute;
  left: 10px;
  top: 22px;
  width: 2px;
  height: calc(100% - 22px);
  opacity: 0.8;
}
.timeline-content-box {
  width: 100%;
}
.timeline-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 5px;
  color: #606266;
  font-size: 13px;
}
.timeline-step {
  color: #409EFF;
  font-weight: bold;
}
.timeline-card {
  background: #fff;
  border-radius: 12px;
  padding: 5px 5px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
  border-left: 4px solid #409EFF;
  width: 250px;
}
.timeline-title {
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 6px;
  color: #303133;
}
.timeline-body {
  font-size: 13px;
  color: #606266;
}
</style>
